<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>
<style>
    .list {
        width: 1210px;
        height: 60px;
        background-color: rgb(170, 169, 169);
        margin:100px auto;
        /* 设置为弹性容器 */
        display: flex;

    }
    .list li{
      /* 设置增长系数 分配的比例都是一样的*/
      flex-grow: 1;
      /* 弹性元素的缩减系数
      flex-shrink: 1; 
      元素基础长度
        flex-basis: 100px; 
        简写flex 增长 缩写 基础
        flex:1 1 auto;
        决定弹性元素的排列顺序
        order: 1;*/

    }
    .list li:hover{
background-color: chartreuse;
    }
    .list a{
        display: block;
        font-size: 16px;
        line-height: 60px;
        color: rgb(0, 0, 0);
        text-align: center;
    }
    .list a:hover{
        color: cornsilk;
    }
   
    
   
</style>

<body>
    <ul class="list">
        <li><a href="#">斗鱼</a></li>
        <li><a href="#">虎扑</a></li>
        <li><a href="#">抖音</a></li>
        <li><a href="#">NBA</a></li>
        <li><a href="#">吃吧</a></li>
        <li><a href="#">斗鱼</a></li>
        <li><a href="#">斗鱼</a></li>
    </ul>
</body>

</html>